
// 1、导入路由组件
import Home from '@/components/getting-started/Home.vue';
import Introduction from '@/components/getting-started/Introduction.vue';
import Basic from '@/components/getting-started/Basic.vue';
import Advanced from '@/components/getting-started/Advanced.vue';

import Header from '@/components/named-views/Header.vue';
import Footer from '@/components/named-views/Footer.vue';

import User from '@/components/props/User.vue';
import Student from '@/components/props/Student.vue';
import Teacher from '@/components/props/Teacher.vue';
import Course from '@/components/props/Course.vue';
import Search from '@/components/props/Search.vue';

import Panda from '@/components/program/Panda.vue';

import Animal from '@/components/nested-routes/Animal.vue';
import Lion from '@/components/nested-routes/Lion.vue';
import Tiger from '@/components/nested-routes/Tiger.vue';
import Name from '@/components/nested-routes/Name.vue';

// 2、定义路由数组
const routes = [
    { 
        path: '/' , 
        components: {
            // 为不同的视图设置不同的组件
            'header': Header ,
            'default': Home ,
            'footer': Footer
        },
        meta: {
            title: '首页'
        }
    } ,
    { 
        // 使用 path 指定 路由 对应路径
        path: '/index' , 
        // 使用 redirect 可以实现重定向
        redirect: '/home' 
    } ,
    // 每个路由都需要映射到一个组件，使用 component 指定组件
    { 
        path: '/home' , 
        components: {
            // 为不同的视图设置不同的组件
            'header': Header ,
            'default': Home ,
            'footer': Footer
        },
        meta: {
            title: '主页'
        }
    } ,
    // 路由对象 也称作 路由记录
    { 
        path: '/introduction/:word' , 
        component: Introduction ,
        meta: {
            title: '介绍'
        }
    } ,
    { 
        path: '/basic' , 
        component: Basic ,
        meta: {
            title: '基础'
        }
    } ,
    { 
        // 指定路径
        path: '/advanced' ,
        // 指定组件 
        component: Advanced ,
        // 指定路由名称
        name: 'advanced' ,
        // 指定别名和参数(其中的:id用于指定路由参数，id就是参数名称)
        alias: '/beginner/:id',
        meta: {
            title: '进阶'
        }
    },
    {
        path: '/user/:id/:name' ,
        name: 'user' ,
        components: {
            // 为不同的视图设置不同的组件
            'header': Header ,
            'default': User ,
            'footer': Footer
        },
        meta: {
            title: '用户信息'
        }
    },
    {
        path: '/student/:id/:name' ,
        name: 'student' ,
        components: {
            'header': Header ,
            'default': Student ,
            'footer': Footer
        },
        meta: {
            title: '学生信息'
        },
        // 将 props 传递给路由组件
        props: true
    },
    {
        path: '/teacher/:id/:name' ,
        name: 'teacher' ,
        components: {
            header: Header ,
            default: Teacher ,
            footer: Footer
        },
        meta: {
            title: '教师信息'
        },
        props: { header: false , default: true , footer: false }
    },
    {
        path: '/course' ,
        name: 'course' ,
        components: {
            header: Header ,
            default: Course ,
            footer: Footer
        },
        meta: {
            title: '课程信息'
        },
        props: { 
            header: false , 
            default: { id: '01201' , name: 'Vue程序设计' , credit: 2 }  , 
            footer: false 
        }
    },
    {
        path: '/search' ,
        name: 'search' ,
        components: {
            header: Header ,
            default: Search ,
            footer: Footer
        },
        meta: {
            title: '搜索'
        },
        props: { 
            header: false , 
            default: route => { 
                return { keyword: route.query.kw };
            }, 
            footer: false 
        }
    },
    {
        path: '/panda' ,
        name: 'panda' ,
        components: {
            header: Header ,
            default: Panda ,
            footer: Footer
        },
        meta: {
            title: '熊猫'
        } ,
        props: { header: false , default: true , footer: false }
    },
    {
        path: '/animal' ,
        name: 'animal' ,
        components: {
            header: Header ,
            default: Animal ,
            footer: Footer
        } ,
        children: [
            {
                path: 'lion' ,
                name: 'lion' ,
                components: {
                    animalName: Name ,
                    default: Lion
                },
                props: { 
                    animalName: route => ( { name: route.query.name } ), 
                    default: false
                },
                meta: {
                    title: '动物(狮子)'
                } 
            },
            {
                path: 'tiger' ,
                name: 'tiger' ,
                components: {
                    animalName: Name ,
                    default: Tiger
                },
                props: { 
                    animalName: route => ( { name: route.query.name } ) , 
                    default: false
                },
                meta: {
                    title: '动物(老虎)'
                } 
            }
        ]
    }
]

export default routes ;